<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>这个是网页标签页名称</title>
</head>
<body>

<h1>我是一级标题</h1>
<h2>我是二级标题</h2>
<h3>我是三级标题</h3>
<h4>我是四级标题</h4>
<h5>我是五级标题</h5>
<h6>我是六级标题</h6>
<p>我是段落</p>

<p>人生七境</p>
<p>初识铭哥</p>
<p>仰慕铭哥</p>
<p>大佬铭神</p>
<p>调侃铭哥</p>
<p>诋毁铭哥</p>
<p>直呼小铭</p>
<p>铭哥是谁？</p>

<!-- letter-space: 2em 的意思是让每个字之间的间隔是两个字宽 -->
<p style="letter-spacing: 2em;">css中的1px并不等于设备的1px</p>

<p>
    我是一个卖报的小行家<br/>风吹雨打我不怕，啦啦啦~
</p>


<!-- 注释 -->
<!-- emmet 写法 -->
<!-- h1{标题} 接着一个 tab 键 -->

<p>
    <strong>很重要</strong>
    <b>默认和很重要一样</b>
    <em>重要</em>
    <i>默认和重要一样</i>
    <del>删了</del>
    <s>默认和删了一样</s>
    <ins>插入</ins>
    <u>默认和插入一样</u>
</p>

<p>
    <span style="font-weight: bold;">加粗</span>
    <span style="font-style: italic;">斜体</span>
    <span style="text-decoration: underline;">下划线</span>
    <span style="text-decoration: line-through;">中划线</span>
</p>

<!-- 会按照宽高比来缩放高度 -->
<img style="width: 50px;" src="http://127.0.0.1:8888/cat.jpg" alt="猫1-绝对路径-全路径">

<!-- 会按照宽高比来缩放宽度 -->
<img style="height: 100px;" src="/cat.jpg" alt="猫2-绝对路径-但没有服务器信息">

<!-- 如果宽高都指定，可能导致图片比例错误 -->
<img style="width: 100px; height: 50px;" src="./cat.jpg" alt="猫3-相对路径">
<img src="cat.jpg" alt="猫4-相对路径-省略了点斜杠">
<img src="hello/cat.jpg" alt="猫5-路径错误的图片">

<audio src="告白气球-周杰伦.mp3" controls></audio>

<!--可以是本地路径链接-->
<a target="_blank" href="about-blank.html">关于空格</a>
<a target="_blank" href="http://127.0.0.1:8888/about-blank.html">关于空格2</a>
<a href="/about-blank.html">关于空格3</a>
<a href="/cat.jpg">一张猫的图</a>
<!--网页链接-->
<a href="https://kg.qq.com/node/personal?uid=619f9a842d2a31893c&shareUid=679c9b8027293f&pageId=homepage_guest">全民K歌</a>

<table border = "1">
    <thead>
    <!-- tr>th*3 -->
    <tr>
        <th>id</th>
        <th>性别</th>
        <th>名称</th>
    </tr>
    </thead>

    <tbody>
    <!-- (tr>td*3)*5 -->
    <tr>
        <td>1</td>
        <td>男</td>
        <td>张三</td>
    </tr>
    <tr>
        <td>2</td>
        <td>女</td>
        <td>燕子</td>
    </tr>
    <tr>
        <td>3</td>
        <td>男</td>
        <td>蛮王</td>
    </tr>
    <tr>
        <td>4</td>
        <td>女</td>
        <td>琴女</td>
    </tr>
    <tr>
        <td>5</td>
        <td>男</td>
        <td>亚托克斯</td>
    </tr>
    </tbody>


</table>

<!--大表格-->
<table border="1" style="border-collapse: collapse;">
    <thead>
    <tr>
        <th rowspan="2">年份</th>
        <th rowspan="2">学期</th>
        <th colspan="3">张三</th>
        <th colspan="3">李四</th>
    </tr>
    <tr>
        <th>音乐</th>
        <th>美术</th>
        <th>舞蹈</th>
        <th>音乐</th>
        <th>美术</th>
        <th>舞蹈</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <th rowspan="2">2021年</th>
        <th>上学期</th>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
        <td>6</td>
    </tr>
    <tr>
        <th>下学期</th>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
        <td>6</td>
    </tr>
    <tr>
        <th rowspan="2">2022年</th>
        <th>上学期</th>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
        <td>6</td>
    </tr>
    <tr>
        <th>下学期</th>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
        <td>6</td>
    </tr>
    <tr>
        <th rowspan="2">2023年</th>
        <th>上学期</th>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
        <td>6</td>
    </tr>
    <tr>
        <th>下学期</th>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
        <td>6</td>
    </tr>
    </tbody>
</table>

<!-- div 是 division 的缩写，没有具体的语义含义，只是用来做分割的 -->
<div>
    <h1>西红柿炒蛋</h1>
    <h2>材料</h2>
    <ul>
        <li>西红柿 <img style="width: 50px;"
                     src="https://img1.baidu.com/it/u=2395254603,3070051248&fm=253&fmt=auto&app=138&f=PNG?w=499&h=384">
        </li>
        <li>鸡蛋 <img style="width: 50px;"
                    src="https://img1.baidu.com/it/u=1929342226,2993583142&fm=253&fmt=auto&app=120&f=JPEG?w=640&h=382">
        </li>
    </ul>
    <h2>步骤</h2>
    <ol>
        <li>下锅</li>
        <li>翻炒</li>
        <li>出锅</li>
    </ol>
</div>

<!--下面这个是测试的玩的-->
<dl>
    <dt>Firefox</dt>
    <dt>Mozilla Firefox</dt>
    <dt>Fx</dt>
    <dd>A free, open source, cross-platform, graphical web browser
        developed by the Mozilla Corporation and hundreds of volunteers.</dd>

    <!-- other terms and definitions -->
</dl>

</body>
</html>